<template>
  <q-dialog class="sel-plant-dialog dialog" v-model="show" persistent>
    <q-card v-drag style="min-width: 566px">
      <q-card-section class="dialog-title bg-primary">
        <div class="text-center text-white">选择车间</div>
      </q-card-section>
      <q-form @submit="submit" class="q-gutter-md dialog-content">
        <q-card-section>
          <div class="factory" v-for="(factory, factoryIndex) in treeList" :key="factoryIndex" v-show="factory.childrenCount>0">
            <div class="title">
              {{factory.label==='default'?userInfo.company_name:factory.label}}
            </div>
            <ul class="plant-list">
              <li class="plant-item text-ellipsis" v-for="(plant, plantIndex) in factory.children" :key="plantIndex"
                  :class="{'active': select.plant.hash === plant.hash}"
                  v-show="plant.label !== 'default'" @click="selectPlant(factory, plant)">
                {{plant.label}}</li>
            </ul>
          </div>
        </q-card-section>

        <q-separator />
        <div class="dialog-footer text-center margin-t-10">
          <q-btn outline label="取消" color="primary" @click="hideDialog" class="q-mr-md"/>
          <q-btn unelevated label="确认" color="primary" type="submit" :loading="submitting"/>
        </div>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    treeList: {
      type: Array
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  data () {
    return {
      show: false,
      submitting: false, // 提交状态
      select: {
        factory: {},
        plant: {}
      },
      thumbStyle: this.CommonConfig.thumbStyle // 滚动条样式
    }
  },
  methods: {
    // 显示弹框
    showDialog (selTree) {
      this.show = true
      this.initInfo(selTree)
    },
    // 隐藏弹框
    hideDialog () {
      this.show = false
    },
    // 初始化数据
    initInfo (selTree) {
      this.select.factory = selTree.factory
      this.select.plant = selTree.plant
    },
    // 选中车间
    selectPlant (factory, plant) {
      this.select.factory = factory
      this.select.plant = plant
    },
    // 提交
    submit () {
      this.$emit('submit', this.select)
      this.hideDialog()
    }
  }
}
</script>

<style scoped lang='stylus'>
.factory{
  margin-top 10px
  &:first-child{
    margin-top 0
  }
}
.title{
  font-size 16px
  font-weight 500
  color #333
  margin-bottom 20px
}
.plant-list{
  display flex
  flex-wrap wrap
  margin-right -10px
  .plant-item{
    width 124px
    height 32px
    padding 0 6px
    line-height 32px
    border:1px dashed #999
    border-radius:6px
    margin-right 10px
    margin-bottom 10px
    text-align center
    cursor pointer
    &.active{
      border-color #5f77fd
      color #5f77fd
    }
  }
}
</style>
